<template>
  <view>
    <!-- 弹出框内容 -->
    <view class="popView">
      <view class="popView-titleView">
        <text class="popView-titleView-text">支行选择</text>
        <image class="popView-titleView-image" mode="aspectFit" src="./image/shutDown-BankHeader.png" @click="closeImageClick"></image>
      </view>

      <view class="popView-search">
        <view class="search-ico-wapper"><image src="./image/search-BankHeader.png" class="search-ico" mode=""></image></view>
        <input type="text" :value="searchText" placeholder="请输入关键字"  class="search-text" @input="searchTextInputClick" />
      </view>

      <scroll-view style="height: 300px; margin-bottom: 20px;" scroll-y="true">
        <view class="blockTwoClass">
          <view v-for="(item, index) in bankList" :key="index" class="popView-block" @click="listClick(item.branchName,item.bankCode, item.branchCode)">
            <text class="popView-block-text">{{ item.branchName }}</text>

            <view class="popView-block-line"></view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { Api, successCode } from '../../https/api.js'
	import {
		cleanObj
	} from '@/commons/filters.js'
export default {
  data() {
    return {
      tabScreenWidth: uni.getSystemInfoSync().windowWidth * 0.3,
      searchText: '',
      bankList: [],
      dataList: [],
	  newkeyword:[],
	  bankCode:'',//总行接口
	  keyValue:''
    }
  },
  // props: {
  // 	dataArray: Array,
  //
  // },
  props:['msg','provCode'],
  created() {
	  
    this.getBankHeaderInfo()
  },
  methods: {
	  cleanObj,
    closeImageClick() {
      this.$emit('closeImageClick', 'close')
    },
    listClick(name, id, id2) {
      this.$emit('bankClick', {
        name: name,
        code: id,    //支行编号
		chCode:id2  //联行号
      })
    },
    getBankHeaderInfo() {
		let bankCode = this.msg
		let provCode = this.provCode
		
		let param={
			bankCode,
			provCode,
			branchName:this.keyValue
			
		}
		this.$showLoading();
      this.$request(this.$api.branchListByBank, cleanObj(param), 'POST').then(res => {
		  this.$hideLoading();
		  if(res.code === 200){
			  console.log('成功')
			  this.bankList = res.data
			  this.dataList = res.data
			  if(res.data.length === 0){
			  				  this.$toastError('暂无搜索数据~')
			  				  return
			  }
			  //数据存储
			  try {
			    uni.setStorageSync('bankDictS', this.bankList)
			  } catch (e) {
			    // error
			  }
		  }else {
          this.$toastError(res.message)
        }
        if (res.code === this.$state.successCode) {
          // console.log('getBankHeaderInfo', res)
          this.bankList = res.data
          this.dataList = res.data
          // console.log('this.bankList', this.bankList)

          //数据存储
          try {
            uni.setStorageSync('bankDict', this.bankList)
          } catch (e) {
            // error
          }
        } else {
         // this.$toastError(res.message)
        }
      })
    },
   //func: 函数
    //wait: 延迟时间
    //搜索防抖
   debounce (func, wait) {
         if (this.timeout) clearTimeout(this.timeout)
         this.timeout = setTimeout(() => {
           func()
         }, wait)
       },
    searchTextInputClick(e) {
		// console.log(e)
		this.keyValue = e.detail.value
		if(e.detail.value != ''){
			this.debounce(this.getBankHeaderInfo, 1000)
		}
		// let keyword = e.detail.value
		// if(!keyword || keyword == '' ){
		// 	this.bankList = this.dataList
		// }else{
		// 	this.newkeyword =this.dataList.filter(el=>el.branchName.includes(keyword))
		// 	this.bankList = this.newkeyword
		// }
		
      // console.log('this.searchText', e.detail.value)
      // this.searchText = e.detail.value

      // this.getBankHeaderInfo()
    }
  }
}
</script>

<style lang="less">
.popView {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  width: 100%;

  .popView-titleView {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    height: 120upx;

    .popView-titleView-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: 32upx;
      color: #333333;
    }

    .popView-titleView-image {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 40upx;
      width: 40upx;
      height: 100%;
    }
  }

  .popView-search {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-left: 5%;
    border: 1px solid #e8e8e8;
    border-radius: 10upx;
    margin-top: 40upx;
    height: 70upx;
    margin-bottom: 30upx;

    .search-ico-wapper {
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0upx 20upx 0upx 20upx;
    }

    .search-ico {
      width: 40upx;
      height: 40upx;
    }

    .search-text {
      color: #333333;
      font-size: 14px;
      height: 70upx;
      width: 90%;
    }
  }

  .blockTwoClass {
    // display: flex;
    // flex-direction: column;

    .popView-block {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin-left: 5%;
      height: 90upx;

      .popView-block-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 28upx;
        color: #333333;
        width: 100%;
        height: 90upx;
      }

      .popView-block-line {
        display: flex;
        width: 100%;
        height: 1upx;
        background-color: #e8e8e8;
      }

      .popView-block-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 90%;
        margin-left: 5%;

        .popView-block-block-text {
          font-size: 28upx;
          color: #666666;
          height: 70upx;
        }
      }
    }
  }
}
</style>
